<template>
	<a-modal
		:visible="props.visible"
		:title="props.id ? '编辑联系人' : '新增联系人'"
		:width="600"
		@cancel="emits('update:visible', false)"
		@ok="confirmAdd"
	>
		<a-form ref="formRef" :model="form" :rules="rules" :label-col="{ style: { width: '100px' } }" class="form_label">
			<a-row>
				<a-col :span="12">
					<a-form-item label="联系人姓名" name="contactsName">
						<a-input v-model:value="form.contactsName"></a-input>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="手机" name="contactsPhone">
						<a-input v-model:value="form.contactsPhone"></a-input>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="职位" name="contactsPost">
						<a-input v-model:value="form.contactsPost"></a-input>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-form-item label="电话"><a-input v-model:value="form.phone"></a-input></a-form-item>
				</a-col>
			</a-row>
		</a-form>
	</a-modal>
</template>
<script setup>
	import customerApi from '@/api/biz/customerApi'
	import { message } from 'ant-design-vue'
	const props = defineProps({
		visible: {
			type: Boolean,
			default: false
		},
		customerCode: {
			type: String
		},
		id: {
			type: String
		},
		info: {
			type: Object
		},
		type: {
			type: [Number, null],
			default: null
		}
	})
	const emits = defineEmits(['update:visible', 'finished'])
	onBeforeMount(() => {
		form.value = props.info
		form.value.customerCode = props.customerCode
	})
	const form = ref({
		contactsName: undefined,
		contactsPost: undefined,
		contactsPhone: undefined,
		phone: undefined
	})
	const validatorPhone = async (rule, value) => {
		let reg = /^1[3456789]\d{9}$/
		if (value && !reg.test(value)) {
			return Promise.reject('请输入正确的手机号')
		} else {
			return Promise.resolve()
		}
	}
	const rules = {
		contactsName: [{ required: true, message: '请输入联系人姓名', trigger: 'blur' }],
		contactsPost: [{ required: true, message: '请输入联系人职位', trigger: 'blur' }],
		contactsPhone: [
			{ required: true, message: '请输入联系人手机', trigger: 'blur' },
			{ validator: validatorPhone, trigger: 'blur' }
		]
	}
	const formRef = ref()
	const confirmAdd = () => {
		formRef.value.validate().then(() => {
			let req
			if (form.value.id) {
				req = customerApi.editContacts
			} else {
				req = customerApi.addContacts
			}
			req({ ...form.value, type: props.type }).then(() => {
				emits('update:visible', false)
				emits('finished')
			})
		})
	}
</script>
<style lang="less" scoped>
	.form_label :deep(.ant-form-item-label > label) {
		color: rgb(107 114 128);
	}
	.form_label :deep(.ant-form-item-label > label::after) {
		color: transparent;
	}
</style>
